<%@ page import="java.util.List" %>
<%@ page import="com.fduss.artStore.entity.Artwork" %><%--
  Created by IntelliJ IDEA.
  User: duocai wu
  Date: 2017/6/29
  Time: 20:50
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <%--<link rel="icon" href="../../favicon.ico">--%>

    <title>Search</title>

    <!-- Bootstrap core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <style>
        .margin-top-100 {
            margin-top: 100px;
        }
        .padding-15 {
            padding: 15px;
        }
    </style>
</head>
<body>
    <jsp:useBean id="artworkService" scope="session"
             class="com.fduss.artStore.service.impl.ArtworkServiceImpl"/>
    <%
        String artworkBase = "./art-images/works/small/";
        String suffix = ".jpg";
        String key = request.getParameter("search_key");
        if (key == null)
            key = "Nudes";
        List<Artwork> artworks = artworkService.search(key);
        int artworkCount = artworks.size();
        int rowSize = 3;
        int rowNum = (artworkCount+1)/rowSize;
    %>
    <%@include file="header.jsp"%>

    <div class="container margin-top-100">
        <div class="panel">
            <h1 class="page-header">Search Results</h1>
            <div>
                <% for (int k = 0; k < rowNum; k++) { %>
                    <!-- Three columns of text below the carousel -->
                    <div class="row">
                        <% for (int i = 0; k*rowSize+i < artworkCount; i++) {
                            Artwork artwork = artworks.get(k*rowSize+i);
                        %>
                        <div class="col-lg-4 text-center">
                            <img class="img-rounded"
                                 src="<%=artworkBase+artwork.getImageFileName()+suffix%>"
                                 alt="Generic placeholder image" width="140" height="140">
                            <p><%=artwork.getTitle()%></p>
                            <p><a class="btn btn-success" href="./artworkDetail.jsp?id=<%=artwork.getArtWorkId()%>" role="button">View details &raquo;</a></p>
                        </div><!-- /.col-lg-4 -->
                        <% } %>
                    </div>
                    <br>
                    <div class="divider"></div>
                <%  } %>
            </div>
        </div>
    </div>

    <br>
    <div class="divider"></div>

    <%@include file="footer.jsp"%>

    <!-- Bootstrap core JavaScript
        ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
